<template>
  <div class="global-box">
    <a-form-model
      class="clause"
      ref="ruleForm"
      :model="queryParam"
      :rules="courseFormRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="协议条款名称" prop="name">
        <a-input
          v-model="queryParam.name"
          :maxLength="inputLength"
          placeholder="请输入协议条款名称"
        />
      </a-form-model-item>
      <a-form-model-item label="课程目录" prop="directory">
        <a-cascader
          :field-names="{ label: 'value', value: 'id', children: 'children' }"
          :options="directoryOptions"
          :load-data="loadData"
          placeholder="请选择课程目录"
          change-on-select
          v-model="queryParam.directory"
        />
      </a-form-model-item>
      <a-form-model-item label="所属事业部" prop="shiYeBu">
        <a-select v-model="queryParam.shiYeBu" placeholder="请选择所属事业部">
          <a-select-option
            :value="item.jiGouTableId"
            :key="item.jiGouTableId"
            v-for="item in affiliationList"
          >
            {{ item.jiGouName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="协议条款分类" prop="type">
        <a-select v-model="queryParam.type" placeholder="请选择协议条款分类">
          <a-select-option :value="item.value" v-for="item in typeList" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="协议条款内容" prop="text">
        <div class="label">
          <a-button type="link">#可输入#</a-button>
          <a-button type="link" v-if="queryParam.type === 1">#退费/重修协议区域#</a-button>
          <a-button type="link" v-if="queryParam.type === 2">#完课比例#</a-button>
          <a-button type="link" v-if="queryParam.type === 3">#考试成绩#</a-button>
          <a-button type="link" v-if="queryParam.type === 5">#售后有效期# </a-button>
          <a-button type="link" v-if="queryParam.type === 6">#退费比例#</a-button>
          <a-button type="link" v-if="queryParam.type === 6">#退费金额#</a-button>
          <a-button type="link" v-if="queryParam.type === 7">#重修年限#</a-button>
          <a-button type="link" v-if="queryParam.type === 7">#重修次数#</a-button>
        </div>
        <a-input
          v-model="queryParam.text"
          type="textarea"
          :rows="4"
          :maxLength="textareaLength"
          placeholder="请输入协议条款内容"
        />
      </a-form-model-item>
      <a-form-model-item label="启用状态" prop="status">
        <a-radio-group v-model="queryParam.status">
          <a-radio :value="item.value" :key="item.value" v-for="item in statusList">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { directory, add, affiliation, edit } from '@/api/agreement/clause'
export default {
  data () {
    return {
      directoryOptions: [],
      statusList: [
        {
          label: '启用',
          value: 0
        },
        {
          label: '禁用',
          value: 1
        }
      ],
      typeList: [{
        label: '基本条款',
        value: 1
      }, {
        label: '完课比例',
        value: 2
      }, {
        label: '考试成绩',
        value: 3
      }, {
        label: '退费/重修其他要求',
        value: 4
      }, {
        label: '退费/重修申请期限',
        value: 5
      }, {
        label: '退费标准',
        value: 6
      }, {
        label: '重修年份',
        value: 7
      }, {
        label: '退费/重新申请材料',
        value: 8
      }],
      textareaLength: 300,
      inputLength: 20,
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      queryParam: {
        name: '',
        directory: [],
        shiYeBu: undefined,
        type: undefined,
        text: '',
        status: 0,
        id: ''
      },
      courseFormRules: {
        name: [
          { required: true, message: '请输入协议条款名称', trigger: 'blur' }
        ],
        directory: [{ required: true, message: '请选择课程目录', trigger: 'change' }],
        shiYeBu: [{ required: true, message: '请选择所属事业部', trigger: 'change' }],
        type: [{ required: true, message: '请选择协议条款分类', trigger: 'change' }],
        text: [{ required: true, message: '请输入协议条款内容', trigger: 'blur' }],
        status: [{ required: true, message: '请选择启用状态', trigger: 'change' }]
      },
      affiliationList: [],
      editData: ''
    }
  },
  mounted () {
    this.getDirectory()
    this.getAffiliation()
    if (this.$route.params.re) {
      this.editData = this.$route.params.re
      this.getData()
    }
  },
  methods: {
    // 编辑数据回显
    getData () {
      this.queryParam.type = this.editData.clauseCategory
      this.queryParam.text = this.editData.clauseContent
      this.queryParam.name = this.editData.clauseName
      this.queryParam.type = this.editData.clauseCategory
      this.queryParam.shiYeBu = this.editData.deptId
      this.queryParam.directory[0] = this.editData.directoryId
      this.queryParam.directory[1] = this.editData.examId
      this.queryParam.status = this.editData.enable
      this.queryParam.id = this.editData.id
    },
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.save()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    save () {
      const data = {
        clauseCategory: this.queryParam.type,
        clauseContent: this.queryParam.text,
        clauseName: this.queryParam.name,
        creatorId: 0,
        creatorName: '',
        deptId: this.queryParam.shiYeBu,
        deptName: '',
        directoryId: this.queryParam.directory[0],
        directoryName: '',
        examId: this.queryParam.directory[1] || 0,
        examName: '',
        enable: this.queryParam.status,
        ifEdit: 0,
        updateTime: '',
        id: this.queryParam.id
      }
      if (this.editData === '') {
        add(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'clause'
            })
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      } else {
        edit(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'clause'
            })
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      }
    },
    // 获取所属机构
    getAffiliation () {
      affiliation({}).then(res => {
        if (res.code === '1') {
          this.affiliationList = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级-六级
    loadData (selectedOptions) {
      if (this.queryParam.directory[1]) {
        return false
      }
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.clause {
  margin-top: 40px;
  .label {
    a {
      padding-right: 10px;
    }
  }
}
</style>
